<template>
  <div class="home">
    <h2 @click="visible.sync=!visible.sync">关于Vue prop.sync</h2>
    <template v-if="visible.sync">
      <Sync :str.sync="str" :obj.sync="obj" :arr.sync="arr"
      />
      <h3>父组件</h3>
      <ul>
        <li>{{str}}</li>
        <li>{{obj}}</li>
        <li>{{arr}}</li>
      </ul>
    </template>
    <h2 @click="visible.rov=!visible.rov">值传递还是引用传递</h2>
    <ReferenceOrValue v-if="visible.rov"/>
    <h2 @click="visible.edit=!visible.edit">HTML editable和光标</h2>
    <template  v-if="visible.edit" >
      <h3>{{content}}</h3>
      <HtmlEditable :content.sync="content"/>
    </template>
  </div>
</template>

<script>
// @ is an alias to /src
import Sync from './Sync'
import ReferenceOrValue from './ReferenceOrValue'
import HtmlEditable from './HtmlEditable'
export default {
  name: 'Home',
  components: {
    Sync,
    ReferenceOrValue,
    HtmlEditable
  },
  data () {
    return {
      str: '123',
      obj: {
        key1: 'key1',
        key2: 'key2'
      },
      arr: [1, 2],
      content: '新内容',
      visible: {
        sync: false,
        rov: false,
        edit: false
      }
    }
  }
}
</script>
<style lang="scss">
h2:hover{
  cursor: pointer;
  background: #eee;
}
</style>
